<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box {
				width: 6.25rem;
				height: 6.25rem;
				background-color: palevioletred;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="aa">
			<a href="./token">获取微信access_token</a>
		</div>
		
		
		
		
		
		
		<br />
		<br />
		<br />
		<div id="box" style="cursor: pointer;"></div>

		<script>
			window.onload = function() {
				/*
				 * 拖拽流程
				 * 1、当鼠标在被拖拽元素上按下时，开始拖拽
				 * 2、当鼠标移动时被拖拽的元素跟着鼠标移动
				 * 3、当鼠标松开时，被拖拽元素固定在当前位置 
				 */
				var box = document.getElementById("box");
				drag(box)

				/* 
				 * obj -要被拖拽的元素
				 */
				function drag(obj) {
					obj.onclick = function() {
						obj.style.width = "300px";
					}

					var addHandler = function(element, type, handler) {
						if (element.addEventListener) {
							element.addEventListener(type, handler, false);
						} else if (element.attachEvent) {
							element.attachEvent("on" + type, handler);
						} else {
							element["on" + type] = handler;
						}
					}
					addHandler(obj, "touchstart", function(event) {
						// var event = event || window.event;
						addHandler(obj, "touchmove", function(event) {
							var event = event || window.event;
							var left = event.clientX;
							var top = event.clientY;
							// obj.style.left = left-ol + "px";
							// obj.style.top = top-ot + "px";
							obj.style.left = left + "px";
							obj.style.top = top + "px";
						})
						addHandler(obj, "touchend", function(event) {
							// 取消document的onmousemove事件
							obj.ontouchmove = null;
							// 同时，document的onmouseup事件也要取消
							obj.ontouchend = null;
						})
					})
					
					// obj.ontouchstart = function(event) {
					// 	var event = event || window.event;
					// 	// var ol = event.clientX - obj.offsetLeft;
					// 	// var ot = event.clientY - obj.offsetTop;

					// 	document.ontouchmove = function(event) {
					// 		var event = event || window.event;
					// 		var left = event.clientX;
					// 		var top = event.clientY;
					// 		// obj.style.left = left-ol + "px";
					// 		// obj.style.top = top-ot + "px";
					// 		obj.style.left = left + "px";
					// 		obj.style.top = top + "px";
					// 	}
					// 	document.ontouchend = function(event) {
					// 		// 当松开鼠标时，被拖拽元素固定在当前位置
					// 		// 取消document的onmousemove事件
					// 		document.ontouchmove = null;
					// 		// 同时，document的onmouseup事件也要取消
					// 		document.ontouchend = null;
					// 	}

					// 	return false;
					// }


					obj.onmousedown = function(event) {
						var event = event || window.event;
						// div的偏移量：鼠标.clientX - 元素.offsetLeft
						var ol = event.clientX - obj.offsetLeft;
						var ot = event.clientY - obj.offsetTop;
						// 设置obj捕获所有鼠标按下的事件
						// obj.setCapture && obj.setCapture();

						// 为document绑定一个onmousemove事件
						document.onmousemove = function(event) {
							var event = event || window.event;
							// 鼠标移动时被拖拽元素跟着移动
							var left = event.clientX;
							var top = event.clientY;
							// 修改obj元素的值
							obj.style.left = left - ol + "px";
							obj.style.top = top - ot + "px";
						}
						// 为document绑定一个鼠标松开事件
						document.onmouseup = function(event) {
							// 当松开鼠标时，被拖拽元素固定在当前位置
							// 取消document的onmousemove事件
							document.onmousemove = null;
							// 同时，document的onmouseup事件也要取消
							document.onmouseup = null;
							// 当鼠标松开时，取消对事件的捕获
							// obj.releaseCapture && obj.releaseCapture();
						}

						/* 
						 * 当我们施接一个问页中的内容时,
						 * 浏览器会然认去援素引中接索内容，
						 * 此时会导致施功能的异常,
						 * 这个是测器供的认行为如果不希望发生这个行为,
						 * 则可以通过 return fa1se来取消认行为 
						 * 但是，IE8不起作用。
						 * 
						 * 设当btne1对标按下相关的事件进行捕获，
						 * 当调用一个元素的setCapture()方法以后,
						 * 这个元将会把下一次所有的鼠标按下相关的事件到自身上；
						 * 元素将会自动将下一次鼠标点击相关的事件捕获到自身上
						 */
						return false;
					}

				}
			}
		</script>
	</body>
</html>
